<template>
  <div class="ProductionFigures">

    <div class="chat-title">生产统计</div>
    <div class="chat-subtitle">Production statistics</div>

    <div class="con-w">
      <div class="pie-wrap">
        <div class="finish-wrap" id="finish"></div>
        <div class="Annotation">
          <div class="bt-wc"></div>
          <div>计划完成率</div>
        </div>
      </div>
      <div class="pie-wrap">
        <div class="qualified-wrap" id="qualified"></div>
        <div class="Annotation">
          <div class="bt-hg"></div>
          <div>产品合格率</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import * as echarts from 'echarts';

  export default {
    props: ["orderInfo"],
    data() {
      return {
        myChart: "",
        myChart1: ""
      };
    },
    watch: {
      orderInfo(newValue, oldValue) {
        this.myChart.clear()
        this.myChart1.clear()

        this.drawCharts();
        this.drawCharts1()
      }
    },
    mounted() {
      this.drawCharts();
      this.drawCharts1()
    },
    methods: {
      drawCharts() {
        var self = this;
        // 基于准备好的dom，初始化echarts实例
        self.myChart = echarts.init(document.getElementById("finish"));
        var e = this.orderInfo.COMPLETE_RATE;
        var option = {
          title: {
            show: true,
            text: e + "%",
            x: "center",
            y: "center", // 通过x,y将标题(进度)定位在圆环中心
            textStyle: {
              fontSize: "33",
              color: "white",
              fontWeight: "400",
              fontFamily: "DINPro, DINPro-Regular",
            },
          },
          tooltip: {
            trigger: "item",
            formatter: "{d}%",
            show: false,
          },
          legend: {
            orient: "vertical",
            x: "left",
            show: false,
          },
          series: {
            name: "",
            type: "pie",
            radius: ["70%", "55%"], // 圈大小
            center: ["50%", "50%"],
            avoidLabelOverlap: true,
            hoverAnimation: false,
            label: {
              normal: {
                show: false,
                position: "center",
              },
              emphasis: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [{
                value: e,
                name: "",
                itemStyle: {
                  // color: "#6790D8",
                  normal: { //颜色渐变
                    color: new echarts.graphic.LinearGradient(
                      0, 0, 0, 1,
                      [{
                          offset: 0,
                          color: '#6ADC5E'
                        },
                        {
                          offset: 0.5,
                          color: '#49B788'
                        },
                        {
                          offset: 1,
                          color: '#1F81CD'
                        }
                      ]
                    )
                  }
                },
              },
              {
                value: 100 - e,
                name: "",
                itemStyle: {
                  // color: "transparent",
                  color: "#133251",

                },
              },
            ],
          },
        };
        self.myChart.setOption(option);
        window.addEventListener("resize", function () {
          self.myChart.resize();
        });
      },
      drawCharts1() {
        // 基于准备好的dom，初始化echarts实例
        var self = this;
        self.myChart1 = echarts.init(document.getElementById("qualified"));
        var e = this.orderInfo.QUALITY_RATE;
        var option = {
          title: {
            show: true,
            text: e + "%",
            x: "center",
            y: "center", // 通过x,y将标题(进度)定位在圆环中心
            textStyle: {
              fontSize: "33",
              color: "white",
              fontWeight: "400",
              fontFamily: "DINPro, DINPro-Regular",
            },
          },
          tooltip: {
            trigger: "item",
            formatter: "{d}%",
            show: false,
          },
          legend: {
            orient: "vertical",
            x: "left",
            show: false,
          },
          series: {
            name: "",
            type: "pie",
            radius: ["70%", "55%"],
            center: ["50%", "50%"],
            avoidLabelOverlap: true,
            hoverAnimation: false,
            label: {
              normal: {
                show: false,
                position: "center",
              },
              emphasis: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [{
                value: e,
                name: "",
                itemStyle: {
                  // color: "#6790D8",
                  normal: { //颜色渐变

                    color: new echarts.graphic.LinearGradient(
                      0, 0, 0, 1,
                      [{
                          offset: 0,
                          color: '#FF486F'
                        },
                        {
                          offset: 0.5,
                          color: '#F63357'
                        },
                        {
                          offset: 1,
                          color: '#F36D37'
                        }
                      ]
                    )
                  }
                },
              },
              {
                value: 100 - e,
                name: "",
                itemStyle: {
                  // color: "transparent",
                  color: "#133251",

                },
              },
            ],
          },
        };
        self.myChart1.setOption(option);
        window.addEventListener("resize", function () {
          self.myChart1.resize();
        });
      },
    },
  }

</script>

<style lang="scss">
  .ProductionFigures {
    .con-w {
      display: flex;
      justify-content: space-around;
      align-content: center;
      align-items: center;
      padding: 0 10px;

      .pie-wrap {
        width: 50%;
        height: 100%;
        text-align: center;

        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #FFFFFF;

        .bt-wc {
          margin-right: 10px;
          width: 15px;
          height: 15px;
          background: linear-gradient(190deg, rgba(120, 223, 113, 0.98), rgba(34, 149, 216, 0.98));
          border-radius: 50%;
        }

        .bt-hg {
          margin-right: 10px;
          width: 14px;
          height: 14px;
          background: linear-gradient(190deg, rgba(240, 110, 57, 0.97), rgba(252, 75, 111, 0.97));
          border-radius: 50%;
        }
      }
    }



    .finish-wrap {
      width: 100%;
      min-height: 260px;
    }

    .qualified-wrap {
      width: 100%;
      min-height: 260px;
    }

    .Annotation {
      margin-bottom: 20px;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      align-content: center;
    }
  }

</style>
